<template>
  <div class="mainContainer">
    <!-- 页面顶部容器盒子 一般放置顶部菜单栏组件 -->
    <div class="header" :style="scssVar">
      <ocn-menu-bar></ocn-menu-bar>
    </div>

    <!-- 页面主体功能区容器 -->
    <div class="bodyBox">
      <!-- 侧边导航组件的容器盒子 -->
      <div class="sideBarBox">
        <ocn-side-bar></ocn-side-bar>
      </div>

      <!-- 子页面级别组件的容器盒子 -->
      <div class="subViewBox">
        <transition class="subViewBox" mode="out-in" name="slide">
          <router-view class="subView"></router-view>
        </transition>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "mainContainer",
  data() {
    return {
      scssVar: {
        "--maxWidth": "100%",
      },
    };
  },
  created() {
    this.testLogin();
  },
  mounted() {},
  activated() {},
  deactivated() {},
  methods: {
    testLogin() {
      this.$network
        .noToken(
          {
            method: "GET", // 'GET' 'POST' 'FILE' 大小写通用
            IPPort: "login",
            urlName: "loginFace",
            fileObj: "", // method = 'FILE' 情况下
            contentType: "application/x-www-form-urlencoded", //method = 'POST'请求下 'application/x-www-form-urlencoded' , 'application/json';
          },
          {
            userName: "惠丰社区网格员",
            password: "123",
            tenantId: 1,
            channel: 1,
          }
        )
        .then((res) => {})
        .catch((err) => {});
    },
  },
};
</script>
<style lang="scss" scoped>
.mainContainer {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.header {
  flex: 1;
  width: 100%;

  // 用作子页区域局部滚动设置
  max-height: 65px;

  // test-start 测试 scss 调取 js声明的变量
  max-width: var(--maxWidth);
  // test-end

  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;

  background-color: #9dbdda;
}

.bodyBox {
  flex: 32;
  width: 100%;

  // 用作子页区域局部滚动设置
  max-height: calc(100vh - 65px);

  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
}

.sideBarBox {
  height: 100%;
  // flex: 4;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.subViewBox {
  height: 100%;
  flex: 28;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #efefef;
}

// 用作子页区域局部滚动设置
.subView {
  overflow-y: auto;
}

.slide-enter-active {
  transition: all 0.3s ease-in-out;
  transform: translateX(0);
}
.slide-leave-active {
  transition: all 0.3s ease-in-out;
  transform: translateX(100%);
}
.slide-enter,
.slide-leave,
.slide-leave-to {
  transform: translateX(100%);
  opacity: 0;
}
</style>
